<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Lemon Team</title>
</head>
<body>
    <div class="pagewrapper">
        <g:form action="search" controller="place">
            <div id="search" style="border: 1px solid #EEE;">
                <div style="width: 32%; height: 70px; background-color: white; position: absolute; z-index: 10;"></div>
                <div style="width: 25%; height: 70px; background-color: white; position: absolute; z-index: 10; left: 32%;">
                    <div style="width: 100%; height: 25px; top: 0px; text-align: center; font-size: 120%">Location</div>
                    <div style="width: 100%; height: 40px; top: 30px; text-align: center;">
                        <input type="text"  class="textfield-s" name="location" value="${params.location}" style="width: 70%;">
                    </div>
                </div>
                <div style="width: 30%; height: 70px; background-color: white; position: absolute; z-index: 10; left: 57%;">
                    <div
                        style="width: 100%; height: 25px; top: 0px; text-align: center; font-size: 120%; position: absolute; z-index: 20;">Price</div>
                    <div
                        style="width: 100%; height: 40px; top: 25px; position: absolute; z-index: 20;">
                        <input type="text" class="textfield-s" name="price1" value="${params.price1 }"
                            style="width: 35%; left: 10%; position: absolute; z-index: 30;">
                        <a
                            style="width: 5%; left: 47.5%; text-decoration: none; position: absolute; z-index: 30; text-align: center;">-----</a>
                        <input type="text"  class="textfield-s" name="price2" value="${params.price2 }"
                            style="width: 35%; right: 10%; position: absolute; z-index: 30;">
                    </div>
                </div>

                <div id=showAdvancedSearch
                    style="width: 5%; height: 70px; background-color: white; position: absolute; z-index: 10; left: 87%; font-size: 120%;">
                    <!-- <div style="width: 100%;height: 25px;top:0px;text-align: center;font-size: 120%;position:absolute;z-index: 20;">Advanced</div>-->
                    Advanced<a id="showAdvancedSearch" href="#"
                        style="left: 40%; position: absolute; z-index: 20; top: 30px;">
                        <img alt="Down"  id="down" class="home-logo" src="${resource(dir: 'images', file: 'down.png')}" />
                       	<img alt="Up" id="up" class="home-logo" style="display:none" src="${resource(dir: 'images', file: 'up.png')}" />
                    </a>
                </div>
                <div
                    style="width: 5%; height: 30px; background-color: white; position: absolute; z-index: 10; left: 94%; top: 20px; font-size: 120%;">
                    <g:actionSubmit value="Search" controller="place" action="search" style = "width: 5em;margin-top: 5px;" />
                </div>


            </div>

            <div id="searchadvanced" style="display: none">
                <table class="tbladvanced">
                    <tr align="left">
                        <td width="15%" colspan="5" class="tdadvanced">SELECTION</td>
                        <td width="15%" colspan="5">PROPERTY TYPE</td>
                        <td width="15%" colspan="5">BED ROOM</td>
                        <td width="15%" colspan="5">BATH ROOM</td>
                        <td width="14%" colspan="5">FEARTURE</td>
                    </tr>
                    <tr align="left">
                        <td width="15%" colspan="5" class="tdadvanced"><input
                            type="radio" id="buyId" name="type" value="true"> Buy</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="house" id="houseId" name="property"> House</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="1" id="bedId1" name="beds"> 1 Bed</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="1" id="bathId1" name="baths"> 1 Bath</td>
                        <td width="14%" colspan="5"><input type="checkbox"
                            value="air" id="airId" name="features"> Air</td>
                    </tr>
                    <tr align="left">
                        <td width="15%" colspan="5" class="tdadvanced"><input
                            type="radio" name="type" id="rentId" value="false">
                            Rent</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="apartment" name="property" id="apartmentId">
                            Apartment</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="2" id="bedId2" name="beds"> 2 Bed</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="2" id="bathId2" name="baths"> 2 Bath</td>
                        <td width="14%" colspan="5"><input type="checkbox"
                            value="celling" name="features" id="cellingId">Celling</td>
                    </tr>
                    <tr align="left">
                        <td width="15%" colspan="5" class="tdadvanced">TRANSPORTATION</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="apartment building" name="property"
                            id="apartmentBuildingId"> Apartment building</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="3" id="bedId3" name="beds"> 3 Bed</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="3" id="bathId3" name="baths"> 3 Bath</td>
                        <td width="14%" colspan="5"><input type="checkbox"
                            value="elevator" name="features" id="elevatorId">
                            Elevator</td>
                    </tr>
                    <tr align="left">
                        <td width="15%" colspan="5" class="tdadvanced"><input
                            type="checkbox" value="Parking" name="features" id="parkingId">
                            Parking</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="villa" id="villaId" name="property"> Villa</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="4" id="bedId4" name="beds"> 4 Bed</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="4" id="bathId4" name="baths"> 4 Bath</td>
                        <td width="14%" colspan="5"><input type="checkbox"
                            value="laundry" id="laundryId" name="features"> Laundry</td>
                    </tr>
                    <tr align="left">
                        <td width="15%" colspan="5" class="tdadvanced"><input
                            type="checkbox" value="garage" id="garageId" name="features">
                            Garage</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="vondominium" id="condominiumId" name="property">
                            Condominium</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="4+" id="bedIdMore4" name="beds"> 4+ Bed</td>
                        <td width="15%" colspan="5"><input type="checkbox"
                            value="4+ " id="bathIdMore4" name="baths"> 4+ Bath</td>
                        <td width="14%" colspan="5"></td>
                    </tr>
                </table>
            </div>

            <div id="map-canvas"
                style="width: 100%; height: 530px; float: left; margin-top: 0px; top: 68px;"></div>

            <div class="div-place-header-main" style="top: 72px;color: #4587BA; background-color: #e2e2e2;font-size: 110%;padding-top:2px" id="place">
                ${listPlaces.size()}
                Listting on map
            </div>
            <input type="button" id="openlist" class="list-open"
                style="top:72px;height:22px;width:22px; ;display:none; background-image: url(${resource(dir: 'images', file: 'arrow20.png')}); ">
            <input type="button" id="closeList" class="list-close"
                style="margin-left: -6px;top:72px;height:22px;width:22px;background-image: url(${resource(dir: 'images', file: 'arrow19.png')}); ">

            <div id="listopen" class="bglist" style="height: 528px; top: 71px;">
                <div id="listopen2" class="bglist style-scrollbar" style="top: 30px;">
                    <g:each in="${listPlaces}" var="place">
                        <script>
                             var poi = {};
                             var currentPlaceID;
                             poi.id            =     '${place.id}';
                            poi.address     =     '${place.address}';
                            poi.price        =     '${place.price}';
                            poi.lat         =     '${place.lat}';
                            poi.lng         =     '${place.lng}';
                            poi.imgpath        =     '${createLink(uri:'/Avatar/getAvatar?placeID='+place.id)}'
                            pois.push(poi);
                        </script>
                    
                <div class="placeitem" id="${place.id}" onMouseOver="onMouseIn(this)" onMouseOut="onMouseOut(this)" onClick="isDetail(this),listimagemain(this)" style=" margin-top:10px;;margin-left:15px;margin-right:15px;padding-top:15px;padding-left:25px;cursor:pointer" >
                        <img id='${place.id}' src="${createLink(uri:'/Avatar/getAvatar?placeID='+place.id)}" width=160px height=140px style="float: right; margin-top:3px;margin-right:10px;margin-left:5px"/>
                        <div style="font-size: 125%; ">Address: ${place.address}</div>
                        <div class="" style="">Price: ${place.price} $</div>
                        <div class="" style="padding-top: 10px">Description: ${place.description}</div>
                    </div>
                    </g:each>
                </div>
            </div>
        </g:form>
    </div>


    <div id="frmInfo" class="superContainer"
        style="position: absolute; top: 13%; left: 20% ; z-index: 70;">
        <div id="btn1">
            <input type="button" value="" class= "btnClose" onclick="isDelete();" />
        </div>
        <div class="container">

            <ul class="tabs" style="position: absolute; top: 5px; left: 10px;" >
                <li><a href="#tab1">Details</a></li>
                <li><a href="#tab2">Photo</a></li>
                <li><a href="#tab3">Feature</a></li>
                <li><a href="#tab4" onclick="subMap();">Right next services</a></li>
            </ul>
            <div class="tab_container"style="position: absolute; top:39px; left: 10px;">
                        <div id="tab1" class="tab_content">                
                        <div id="addressValue" style="font-size:13px;width: 277px;height: 376px;background-color: #dddddd;color:black; position: absolute; float:right;top: 20px; left: 500px;padding-left:20px;padding-top:20px">
                        </div>
                        <div id="imageplace" style="width:470px;height:280px; position: absolute; float:left;top: 20px">
                        
                        </div>
                        <div id="contactplace" style="width:460px;height:96px;background-color: #dddddd;color:black; position: absolute; float:left;top:300px;padding-left:20px;padding-top:20px">                    
                        </div>                
                </div>
                <div id="tab2" class="tab_content">
                <div style="width: 277px; height:28px; color: #0053a6; position: absolute; float: right; left: 500px;  top:20px ;">
                        <div id="myTask" style="float: left;">
                            <a href="#" id="dislike" onclick="isLike1(this);"style="display: none;position: absolute;margin-left: 20px;top:5px;">Unlike</a>
                            <a href="#" id="like" onclick="isLike1(this);" style="display: none;position: absolute;margin-left: 20px;top:5px;">Like</a>
                        </div>        
                        <div style="margin-left: 47px;position: absolute;"><img style="position: absolute;left:20px;" alt="Lemon team" class="home-logo" src="${resource(dir: 'images', file: 'like.png')}" /></div>                
                        <div id="countOflike" style="margin-left: 100px;position: absolute;top:5px"></div>
                        

                </div>
                         <div id="123" class="style-scrollbar"
                        style="width: 293px; height: 346px;
                        background-color: #dddddd; color: #0053a6;
                        position: absolute; float: right;
                        top: 50px; left: 500px; overflow: scroll;overflow-x:hidden;
                         padding-left: 5px; ">
                        
                        <div id="listAllOldComment" class="style-scrollbar" style="font-size:13px;margin-top: 10px;color:black"></div>
                        <div id="listAllComment" style="font-size:13px;color:black;"></div>
                        
                    </div>
                        <div id="abc" style="width: 470px;height: 400px; background-color: #dddddd; position: absolute; float:left;top: 20px">
                        <div id="galleria" style="height: 400px;">        
                        </div>
                    </div>        
                        <div style="top:398px;width:200px;margin-left:490px;position: absolute;">
                        <input type="text" id="contentComment" name="q" style="width: 295px;font-size: 13px;"></input>
                    </div>            
                </div>
                <div id="tab3" class="tab_content">
                    <h2>Resources</h2>
                    <a href="#"><img alt="" /></a>
                    <h3>
                        <a href="#">hello3</a>
                    </h3>
                </div>
                <div id="tab4" class="tab_content">
                    <h2>Contact</h2>
                </div>
            </div>
        </div>
         <div id="button" >
         	<input type="button" value="Add to Compare" style="position: absolute; top: 472px; left: 670px;  width: 120px;" />
            <input type="button"  id="test" onclick="isToFavourite();" value="Add to Favourite" style="position: absolute; top: 472px; left: 545px; width: 120px;" />
            <input type="button"  id="remove" onclick="isRemove();" value="Remove Favourite" style="position: absolute; top: 472px; left: 545px;display:none; width: 120px;" />
        </div>
    </div>
    <div id="backgroundPopup"></div>
    <div id="info"></div>
    <script>setCenter("frmInfo")</script>
</body>
</html>